<template>
  <div class="certification-wrap">
    <div class="title">
      海博认证中心授予
      <span class="name">凯发娱乐</span>
      铂金认证
    </div>
    <div class="img-wrap" :style="{background: `url(${$baseImgUrl + img}) no-repeat center`}"></div>
    <div class="index-wrap">
      <company-index
        v-for="(item, index) in indexList"
        :key="index"
        activeBarColor="#aaa"
        barColor="#ddd"
        textColor="#666"
        scoreColor="#f00"
        :barHeight="14"
        :name="item.name"
        :score="item.score"
      ></company-index>
    </div>
    <div class="score-wrap">
      <div>综合得分：</div>
      <rate
        :rate="9.5"
        :perRate="2"
        :fontSize="24"
        rateTemplate="value分"
      ></rate>
    </div>
    <h2>海博认证数据来源标准：</h2>
    <div class="content">
      <p>网站经营历史、是否有牌照占比30%</p>
      <p>玩家评测数据占比30%</p>
      <p>海博评测中心专家指数占比20%</p>
      <p>行业媒体和主流媒体曝光度指数占比10%</p>
      <p>保证金以及信誉指数占比10%</p>
    </div>
    <div class="detail-btn">查看详细信息>></div>
  </div>
</template>

<script>
import CompanyIndex from './Index.vue';
import Rate from '../../../components/Rate.vue';

export default {
  name: 'CompanyCertification',
  components: {
    CompanyIndex,
    Rate
  },
  data() {
    return {
      img: 'company/letter_block01.jpg',
      indexList: [
        { name: '网站指数', score: 9.7 },
        { name: '玩家指数', score: 8.7 },
        { name: '专家指数', score: 9.9 },
        { name: '媒体指数', score: 9.8 },
        { name: '信誉指数', score: 9.9 }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .certification-wrap {
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid #ccc;
    font-size: 1.4rem;
    color: #666;
    .title {
      text-align: center;
      font-size: 1.8rem;
      color: #333;
      .name {
        color: #f00;
      }
    }
    .img-wrap {
      margin: 2rem auto;
      width: 100px;
      height: 100px;
    }
    .index-wrap {
      width: 100%;
      padding: 0 2rem;
      .index {
        margin: 15px 0;
      }
      .index /deep/ .name {
        flex: 0 0 7rem;
      }
    }
    .score-wrap {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0 2rem;
      justify-content: flex-start;
    }
    h2 {
      margin-top: 2rem;
      padding-left: 2rem;
    }
    p {
      padding-left: 2rem;
      line-height: 34px;
      font-size: 1.4rem;
    }
    .detail-btn {
      width: 12rem;
      margin: 1rem 0 0 2rem;
      padding: 1rem;
      background-color: @mainBgColor;
      border-radius: 3px;
      color: #fff;
      cursor: pointer;
      &:hover {
        background-color: @mainBgHoverColor;
      }
    }
  }
</style>
